<template>
  <div>
    <van-row>
      <van-col span="6"><lef></lef></van-col>
      <van-col span="18">
        <van-row>
          <van-col span="24"><headers></headers></van-col>
        </van-row>
        <van-row>
          <van-col span="9">
            <van-field
                v-model="name"
                name="name"
                label="角色名称"
                placeholder="请输入角色名称"
                :rules="[{ required: true, message: '请输入角色名称' }]"
            /> </van-col>
          <van-col span="3"><van-button type="info">查询</van-button></van-col>
        </van-row>
        <van-row>
          <table border="1" cellspacing="0">
            <tr>
              <td>角色名称</td>
              <td>角色编码</td>
              <td>操作</td>
            </tr>
            <tr v-for="i in rolelist" :key="i.id">
              <td>{{i.name}}</td>
              <td>{{i.code}}</td>
              <td>
                <button @click="role_resource(i.id)">配置资源</button></td>
            </tr>
          </table>
          <div v-show="is_show">
            <el-transfer
                v-model="value"
                :props="{
          key: 'id',
          label: 'name',
            }"
                :data="resourcelist"
            >
            </el-transfer>
            <button @click="add_res(id)">确认</button>
            <button @click="ss">取消</button>
          </div>
        </van-row>

      </van-col>
    </van-row>


  </div>
</template>

<script>
import myaxios from "@/http/axios";
import Lef from "@/components/veiw/lef";
import Headers from "@/components/veiw/headers";

export default {
  name: "resource",
  components: {Headers, Lef},
  data() {
    return {
      data1: '',
      rolelist:[],
      resourcelist:[],
      value:[],
      is_show:false,
      role_id:0
    }
  },
  methods: {
    get_roles(){
      myaxios('roles','get').then(res=>{
        this.rolelist = res.list
        this.getresource()
      })
    },
    getresource(){
      myaxios('resource','get').then(res=>{
        this.resourcelist = res.list
      })
    },
    generateData(){
      for (let i = 0; i < this.resourcelist.length; i++) {
        this.value.push(
          i['id']
          // desc: `Option ${i}`,
          // disabled: i % 4 === 0,
        )
      }
    },
    role_resource(id){
      this.is_show = true
      this.role_id = id
      myaxios('resource?id='+id,'get').then(res=>{
        this.value = res.list
      })
    },
    ss(){
      this.is_show = false
    },
    add_res(){
      myaxios('setrole?id='+this.role_id,'post',this.value).then(res=>{
        alert(res.msg)
      })
    },

  },
  mounted() {
    this.get_roles()
  }
}
</script>

<style scoped>

</style>